<template>
    <div class="app-portal-content" v-if="currentData">
        <div class="app-portal-cnt-hd" v-if="currentData.name">
            <div class="app-portal-hd-icon">
                <i v-if="currentData.id === -100" class="fa fa-globe-asia"></i>
                <i v-else-if="currentData.id === -1" class="fa fa-google"></i>
                <i v-else-if="isApp(currentData)" class="fa fa-app-store"></i>
                <i v-else-if="isFuncModule(currentData)" class="fa fa-js"></i>
            </div>
            <div class="app-portal-title">
                <div class="app-portal-title" v-html="currentData.name"></div>
                <div class="app-portal-mark" v-if="isFuncModule(currentData)">{{ currentData.func_module_code }}</div>
            </div>
            <div class="app-portal-tools">

            </div>
            <el-button icon="el-icon-plus" class="app-group-add-btn" type="text" size="small"
                       @click="handleShowCreateFunc()">注册函数</el-button>
        </div>
        <div class="app-portal-cnt-bd comps" v-loading="loading">
            <el-row :gutter="10">
                <el-col :span="6" v-for="func in funcs" :key="func.func_id">
                    <div class="comp-box comp-plain" :class="{ 'active': selected && func.func_id == selected.func_id }"
                         @click="handleSelect(func)">
<!--                        <div class="comp-head">
                            <span class="comp-head-title">{{func.name}}</span>
                            <el-button size="mini" type="text" @click="handleShowCustomEditWin(comp)">编辑</el-button>
                            <el-button size="mini" type="text" @click="handleDelete(comp)">删除</el-button>
                        </div>-->
                        <div class="comp-body">
                            {{func.func_name}}
                            <!--<div class="comp-remark" v-text="comp.remark"></div>-->
                        </div>
                        <div class="actions">
                            <el-button size="small" type="text" @click="handleShowView(func)">查看</el-button>
                            <el-button size="small" type="text" @click="handleShowEdit(func)">编辑</el-button>
                            <el-button size="small" type="text" @click="handleShowDelete(func)">删除</el-button>
                        </div>
                        <i class="comp-selected el-icon-check"></i>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-drawer :title="formFuncWinName" :visible.sync="formFuncWinShow" :append-to-body="true"
                   :with-header="false" size="96%"
                   direction="rtl" class="wf-node-prop-drawer">
            <div class="func-form-body">
                <lownode-func v-model="form" :app-id="appId" :type="type">
                    <div class="func-form-actions" slot="header-tools">
                        <el-button @click="formFuncWinShow = false" size="small" style="width:80px;"> 取消 </el-button>
                        <el-button type="primary" @click="handleSave()" size="small" style="width:80px;"> 保存 </el-button>
                    </div>
                </lownode-func>
                <!--<div class="func-form-footer">
                    <el-button @click="formFuncWinShow = false" style="width:120px;"> 取消 </el-button>
                    <el-button type="primary" @click="handleSave()" style="width:120px;"> 保存 </el-button>
                </div>-->
            </div>
        </el-drawer>

        <!--<resize-observer @notify="handleResize" />-->
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    import common from './common';

    export default {
        props: [ 'currentData' ],
        data() {
            return {
                loading: false,

                funcs: [],
                selected: null,
                actionType: 'view',     // createOption | createOptionBefore | createOptionChild | edit
                datasTableHeight: 500,

                appId: null,
                type: 3,
                form: null,
                formFuncWinName: '',
                formFuncWinShow: false,
            }
        },
        components: {

        },
        created () {
            // this.pid = this.$route.query.pid;
        },
        mounted () {
            this.init();
        },
        watch: {
            currentData: {
                deep: true,
                handler (val) {
                    this.init();
                }
            }
        },
        filters: {

        },
        computed: {
            ...mapState([
                'loginUser',
                'project'
            ]),
        },
        methods: {
            ...common,
            async init() {
                // this.handleResize();

                this.loading = true;

                let appId = _.get(this.currentData, 'id');
                let funcs = [];
                let type = 3;

                if(this.isPlatform(this.currentData)) {
                    type = 1;
                    // funcs = await this.$japi.func.getFuncsByType(1);
                } else if(this.isGlobal(this.currentData)) {
                    type = 2;
                    // funcs = await this.$japi.func.getFuncsByType(2);
                } else if(this.isApp(this.currentData)) {
                    type = 3;
                }

                funcs = await this.$japi.func.getFuncs({ type, app_id: appId });

                if(appId > 0) {
                    this.appId = appId;
                } else {
                    this.appId = -1;
                }

                this.type = type;
                this.funcs = funcs;
                this.loading = false;
            },
            handleShowCreateFunc() {

                if(!this.currentData) return;

                this.actionType = 'create';     // createGroup | createMb | edit | view

                let name = _.get(this.currentData, 'name');

                this.form = null;
                this.formFuncWinName= `【${name}】下添加云函数`;
                this.formFuncWinShow = true;
            },
            handleShowView(func) {
                this.handleShowEdit(func);
            },
            handleShowEdit(func) {
                // this.selected = func;

                this.form = _.cloneDeep(func);

                let name = _.get(func, 'func_name');

                this.actionType = 'edit';
                this.formFuncWinShow = true;
                this.formFuncWinName = `修改云函数【${name}】`;
            },
            async handleShowDelete(func) {

                let name = _.get(func, 'func_name');
                let typeName = '云函数';

                let msg = `确定删除${ typeName }【${name}】?`;
                this.$confirm(msg, '删除确认').then(async () => {
                    // let id = null;
                    let ret = await this.$japi.func.removeFunc(func.func_id);
                    if(!ret) return;
                    this.init();
                }).catch(e => {

                });
            },
            handleSelect(func) {
                this.selected = func;
            },
            /*handleResize() {
                this.$nextTick(() => {
                    if(!this.$refs.datasContainer) return;

                    let rect = this.$refs.datasContainer.getBoundingClientRect();
                    let height = _.get(rect, 'height');
                    if(height > 0) {
                        this.datasTableHeight = height;
                    }
                });
            },*/
            async handleSave() {

                let form = _.cloneDeep(this.form);
                let tip = '';

                if(!form) return;

                if(!form.func_name) {
                    tip = '函数名称不能为空！';
                }

                if(tip) {
                    this.$notify.error({
                        title: '提示',
                        message: tip
                    });
                    return;
                }

                this.loading = true;

                let funcId = _.get(form, 'func_id');
                let ret;

                if(funcId) {
                    ret = await this.$japi.func.updateFunc(form);
                } else {
                    ret = await this.$japi.func.createFunc(form);
                }


                if(ret) {
                    this.formFuncWinShow = false;
                    this.init();
                }

                this.loading = false;
            }
        }
    }
</script>
